<style type="text/css">
    #chart-container { text-align: left; }
    .orgchart .node .content {
        height: 40px;
    }
</style>
<div class="layout-row min-size">
    <div class="control-toolbar toolbar-padded">
        <div class="toolbar-item" data-calculate-width>
            <div class="relative loading-indicator-container size-input-text">
                <input
                        type="text"
                        id="search_text"
                        name="search"
                        value="<?= e($search_text) ?>"
                        class="form-control icon search growable"
                        placeholder="<?= e(trans('backend::lang.media.search')) ?>"
                        data-control="search"
                        autocomplete="off"
                        data-load-indicator
                        data-load-indicator-opaque
                />
            </div>
        </div>
    </div>
</div>

<div class="layout-row">
    <div id="chart-container"></div>
</div>
<script type="text/javascript">
    $(function() {

        var datascource = <?= $datascource ?>;

        var ajaxURLs = {
            'children': "<?= url('baseapi/orgchart/tuijianchildren').'/' ?>",
        };

        $('#chart-container').orgchart({
            'data' : datascource,
            'ajaxURL': ajaxURLs,
            'nodeContent': 'title',
            'nodeId': 'id',
            'pan':true,
            'zoom':true,
            // 'direction': 'l2r',
        });
    });

    $("#search_text").keypress(function(e){
        if(e.keyCode == 13){
            searchInfo();
        }
    });
    function searchInfo(){
        var search_text = $("#search_text").val();
        var params = new URLSearchParams();
        params.append('search_text', search_text);
        var url="<?= Backend::url('summer/hjd/orgchart/tuijian') ?>"
        url=url+"?"+params.toString();
        location.href = url;
    }
</script>